<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }

        a {
            text-align: none;
        }

        li {
            list-style: none;
        }

        .box {
            width: 100%;
            height: 800px;
            /* background-color: rgb(130, 185, 176); */
            margin: 10px auto;
            position: relative;
        }

        #box1 {
            background-color: rgb(7, 173, 239);
            position: absolute;
            top: 0px;
            left: 0px;
            text-align: left;
        }

        .box1 {
            background-color: rgb(7, 173, 239);
            position: absolute;
        }

        .box2 {
            width: 600px;
            height: 400px;
            /* background-color: rgb(7, 173, 239); */
            position: absolute;
            bottom: 0px;
        }

        #box2 {
            background-color: rgb(187, 187, 225);
            position: absolute;
            bottom: 0px;
            left: 0px;
            text-align: left;
        }

        #box3 {
            background-color: rgb(7, 173, 239);
            position: absolute;
            right: 300px;
            top: 0px;
            text-align: left;
        }

        .box3 {
            background-color: rgb(7, 173, 239);
            position: absolute;
            right: 0px;
            top: 0px;
        }


        #dingdan {
            position: absolute;
            left: 500px;
            top: 20px;
            z-index: 2;
        }

        #dingdan2 {
            position: absolute;
            left: 250px;
            top: 20px;
            z-index: 2;
        }

        #dingdan3 {
            position: absolute;
            right: 320px;
            top: 20px;
            z-index: 2;
        }
    </style>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div class="box">
        <div class="box1">
            <select name="" id="dingdan" onchange="fn1()">
                <option value="1">请选择</option>
                <option value='0'>最近6个月</option>
            </select>
            <div id="box1" style="width: 600px;height:400px;">
                <h1>订单趋势统计图</h1>
            </div>
        </div>
        <div class="box2">
            <select name="" id="dingdan2" onchange="fn2()">
                <option value="0">请选择</option>
                <option value='1'>最近6个月</option>
            </select>
            <div id="box2" style="width: 600px;height:400px;">
                <h1>订单商品数</h1>
            </div>
        </div>
        <div class="box3">
            <select name="" id="dingdan3" onchange="fn3()">
                <option value="0">请选择</option>
                <option value='1'>本月</option>
            </select>
            <div id="box3" style="width: 600px;height:400px;">
                <h1>订单数</h1>
            </div>
        </div>
        <div id="box4" style="width: 600px;height:400px;"></div>
    </div>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <script type="text/javascript">
        var a = document.getElementById('dingdan')
        var b = document.getElementById('dingdan2')
        var c = document.getElementById('dingdan3')

        //获取接口数据
        function fn1() {
            if (a.value == 0) {
                var xhr = new XMLHttpRequest()
                xhr.open('get', 'https://www.zzgoodqc.cn/index.php/index/index/getOrders')
                xhr.send()
                xhr.onload = () => {
                    var a = JSON.parse(xhr.response);
                    var order = a.data.arr
                    console.log(order);
                    var list = a.data.list
                    console.log(list);
                    var arr = [5, 10, 15, 20, 25]
                    var title = a.msg
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('box1'));
                    option = {
                        title: {
                            text: '订单趋势统计图',
                            left: '1%',
                            top: '4%',
                        },
                        tooltip: {
                            trigger: 'axis',
                        },
                        legend: {
                            type: 'scroll',
                            data: ['总金额', '订单数'],
                            // pageButtonItemGap: 5,
                            // pageButtonGap: 2,
                            pageTextStyle: {
                                color: '#333',
                                fontStyle: 'normal',
                                fontWeight: '100',
                            },
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['4月', '5月', '6月', '7月', '8月', '9月']
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: `￥{value}k`
                            },
                        },
                        series: [
                            {
                                name: '总金额',
                                data: [59, 88, 136, 110, 310, 520],
                                type: 'line',
                                areaStyle: {
                                    color: 'rgb(172, 124, 216)',
                                },
                                smooth: true
                            },
                            {
                                name: '订单数',
                                data: [30, 46, 89, 26, 69, 200],
                                type: 'line',
                                areaStyle: {
                                    color: 'blue',
                                    opacity: 0.5
                                },
                                smooth: true
                            }
                        ]
                    };
                    myChart.setOption(option);

                }
                xhr.onerror = (e) => {
                    console.log(e);
                }
            } else {
                alert('请重新选择')
            }
        }
        function fn2() {
            if (b.value == 1) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('box2'));
                option = {
                    title: {
                        text: '订购商品数',
                        left: '1%',
                        top: '4%',
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        right: 'right',
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center',
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: 40,
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: [
                                { value: 4260, name: '今日' },
                                { value: 3970, name: '比昨日' },
                                { value: 3454, name: '本周' },
                                { value: 2390, name: '上周同期' },
                            ]
                        }
                    ]
                };
                myChart.setOption(option);
            }
        }
        function fn3() {
            if (c.value == 1) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('box3'));
                option = {
                    title: {
                        text: '订购数',
                        left: '1%',
                        top: '4%',
                    },
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: [
                            ['product', '比昨日', '上周同期', '上月同期'],
                            ['11.07', 43.3, 85.8, 93.7],
                            ['11.08', 83.1, 73.4, 55.1],
                            ['11.09', 86.4, 65.2, 82.5],
                            ['11.10', 72.4, 53.9, 39.1],
                            ['11.11', 74.4, 53.9, 35.1],
                            ['11.12', 73.4, 43.9, 32.1],
                            ['11.13', 83.4, 63.9, 34.1]
                        ]
                    },
                    xAxis: { type: 'category' },
                    yAxis: {},
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
                };
                myChart.setOption(option);
            } else {
                alert('请重新选择')
            }
        }
    </script>
</body>

</html>